<template>
  <content-item title="基础信息">
    <div class="content userinfo input-bgc">
      <el-form label-width="45" :model="userFormData" size="large">
        <el-row :gutter="120">
          <el-col :span="12">
            <el-form-item label="昵称">
              <el-input
                placeholder="请输入用户昵称"
                v-model="userFormData.username"
              ></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="userFormData.sex">
                <el-option label="男"></el-option>
                <el-option label="女"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="生日">
              <el-date-picker
                v-model="userFormData.birthday"
                type="date"
                placeholder="请选择生日"
                size="large"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="简介">
              <el-input
                type="textarea"
                rows="5"
                v-model="userFormData.content"
              ></el-input>
            </el-form-item>
            <el-button style="float: right" type="primary">保存</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </content-item>
  <content-item title="账户安全">
    <div class="content safe">
      <safe-lable-item
        title="基本设置"
        label="登录密码"
        value="已设置。密码至少6位字符，支持数字、字母和除空格外的特殊字符，且必须同时包含数字和大小写字母。"
      />
      <safe-lable-item label="安全手机" value="已绑定：150******50" />
      <safe-lable-item
        label="安全邮箱"
        handle-txt="设置"
        placeholder="您暂未设置邮箱，绑定邮箱可以用来找回密码、接收通知等。"
      />
      <safe-lable-item :slot="true" label="三方登录">
        <span>已绑定</span>
      </safe-lable-item>
      <safe-lable-item
        title="登录方式"
        label="重置密码"
        handle-txt="重置"
        value="重置账号密码。密码至少6位字符，支持数字、字母和除空格外的特殊字符，且必须同时包含数字和大小写字母。"
      />
      <safe-lable-item
        label="注销账户"
        handle-txt="注销"
        handle-type="danger"
        value="如果您不再使用此账号，可以将其注销。账号成功注销后，其下所有服务、数据及隐私信息将会被删除并将无法恢复"
      />
    </div>
  </content-item>

  <content-item title="地址管理">
    <table-com :list="list" :column="column" style="margin-top: 20px">
      <template v-slot:handler>
        <el-link>编辑</el-link>
        <el-link>删除</el-link>
      </template>
    </table-com>
  </content-item>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import ContentItem from '@/pages/member/views/index/components/ContentItem.vue'
import SafeLableItem from '@/pages/member/views/index/components/SafeLableItem.vue'
import tableCom from '@/components/table/index.vue'

const userFormData = reactive({
  username: '',
  sex: '男',
  birthday: '',
  content: '',
})
const column = reactive([
  {
    label: '地址',
    prop: 'username',
  },
  {
    label: '收货人',
    prop: 'username',
  },
  {
    label: '邮箱',
    prop: 'email',
  },
  {
    label: '手机号',
    prop: 'mobile',
  },
  {
    label: '操作',
    prop: 'mobile',
    type: 'slot',
    slotName: 'handler',
  },
])

const list = reactive([
  {
    username: '张三',
    addr: '江苏省南京市宣武区某某街道某某地区',
    email: '13512551212@163.com',
    mobile: '13512551212',
  },
  {
    username: '张三',
    addr: '江苏省南京市宣武区某某街道某某地区',
    email: '13512551212@163.com',
    mobile: '13512551212',
  },
  {
    username: '张三',
    addr: '江苏省南京市宣武区某某街道某某地区',
    email: '13512551212@163.com',
    mobile: '13512551212',
  },
])
</script>

<style scoped lang="scss">
.content {
  &.userinfo {
    padding-top: 25px;

    :deep(.el-form-item) {
      .el-form-item__label {
        display: inline-block;
        text-align: justify;
        text-align-last: justify;
        text-justify: distribute-all-lines;
      }

      .el-input,
      .el-select__wrapper {
        width: 100%;
        height: 40px;
      }

      .el-textarea__inner {
        background-color: #fafafb;
      }
    }
  }

  &.safe {
    padding-top: 10px;
  }
}
</style>
